<template>
  <div class="all-rel">
    <div class="all-flex-center-between all-top-handle">
      <el-button size="small" @click="clearFilter">重置所有筛选</el-button>
      <router-link to="/article/add"><span class="all-add-btn el-icon-plus"></span></router-link>
    </div>
    <div class="all-flow-table-box">
      <el-table ref="myTable" :data="list" border stripe>
        <el-table-column sortable align="center" prop="articleID" label="文章ID" width="100"></el-table-column>
        <el-table-column align="center" prop="title" label="标题" width="180"></el-table-column>
        <el-table-column align="center" prop="author" label="作者" width="100"></el-table-column>
        <el-table-column align="center" prop="typeText" label="类型" width="100"
          :filters="[{text: '收费文章', value: '收费文章'}]"
          :filter-method="filterHandler"
        ></el-table-column>
        <el-table-column align="center" prop="browse" label="浏览量" width="100"></el-table-column>
        <el-table-column sortable align="center" prop="addTime" label="添加时间" width="170"></el-table-column>
        <el-table-column align="center" label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="mini" @click="$router.push({ path: '/article/detail?articleID=' + scope.row.articleID })">详情</el-button>
            <el-button size="mini" @click="$router.push({ path: '/article/edit?articleID=' + scope.row.articleID })">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label=""></el-table-column>
      </el-table>
    </div>
    <div class="all-pagination">
      <el-pagination background layout="prev, pager, next" :page-size="size" :total="count" @current-change="currentPage"></el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      size: 10,
      count: 0,
      list: []
    };
  },
  methods: {
    clearFilter() {
      this.$refs.myTable.clearFilter();
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    getList(page, size) {
      let _this = this;
      this.$ajax({
        url:'article/getArticleList',
        data:{
          app:{
            page: page,
            size: size === undefined ? this.size : size,
          }
        },
        perfect(con) {
          _this.list = con.list;
          _this.count = con.count;
        },
        success(res) {
          if (res.data.code !== 1) {
            _this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }
      });
    },
    handleDelete(row) {
      const _this = this;
      this.$confirm("确定要删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then((res) => {
        //删除操作
        this.$ajax({
          url: "article/delArticle",
          data: {
            app: {
              articleIDS: [row.articleID]
            }
          },
          success(res) {
            if (res.data.code === 1) {
              _this.$message({
                message: res.data.msg,
                type: 'success',
                onClose(){
                  _this.$router.go(0);
                }
              });
            } else {
              _this.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }
          }
        });
      }).catch(() => {});
    },
    currentPage(page) {
      this.getList(page);
    }
  },
  created(){
    this.getList(1);
  }
};
</script>

<style scoped>
.shrink-box {
  width: 100%;
  font-size: 0;
}
.shrink-box >>> label {
  width: 90px;
  color: #99a9bf;
}
.shrink-box .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.333333%;
}
</style>
